<template>
    <title-box title="节能减排">
        <ul class="energy-type">
            <li>
                <div class="pic01"></div>
                <div class="txt">
                    <h4>节约煤炭</h4>
                    <p>{{ format(econ.coal) }}t</p>
                </div>
            </li>
            <li>
                <div class="pic02"></div>
                <div class="txt">
                    <h4>减排CO₂</h4>
                    <p>{{ format(econ.co2) }}t</p>
                </div>
            </li>
            <li>
                <div class="pic03"></div>
                <div class="txt">
                    <h4>等效植树</h4>
                    <p>{{ format(econ.tree) }}</p>
                </div>
            </li>
            <li>
                <div class="pic04"></div>
                <div class="txt">
                    <h4>累计收益</h4>
                    <p>{{ format(econ.earnings) }}</p>
                </div>
            </li>
        </ul>
    </title-box>
</template>
<script setup>
import { reactive, computed, watch } from 'vue'
import TitleBox from '/@/components/TitleBox/index.vue'
import { economy } from '/@/api/Inverter/Station/index.js'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios.js'
import { clone } from '@iframe/tools/utils/Tools'

const props = defineProps({
    stationId: {
        type: Number
    }
})

const econ = reactive({})
const format = computed(() => {
    return value => {
        return value ? value.toFixed(2) : '--'
    }
})

const onEconomy = () => {
    if (props.stationId) {
        economy({ stationId: props.stationId }).then(result => {
            if (result.code === SUCCESS_CODE) {
                clone(econ, result.data)
            }
        })
    }
}

watch(
    () => props.stationId,
    () => {
        onEconomy()
    }
)
onEconomy()
</script>
